<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script>
        function $(id) {
          return document.getElementById(id)
        }
        window.onload = function () {
            axios.get("/country/findAll").then(resp =>{
                let str="";
                resp.data.forEach(e =>{
                    str +=`<option value="${e.id}">${e.name}</option>`;
                    $("countrySelect").innerHTML=str;
                })
            });
        }
        function findCity() {
            var paramObj = new URLSearchParams();
            paramObj.append("countryId",$("countrySelect").value);
            axios.post("/city/findByCountry", paramObj).then(resp => {
                var cityStr = "";
                resp.data.forEach(e => {
                    cityStr += `<option>${e.name}</option>`
                    $("citySelect").innerHTML = cityStr;
                });
            });
        }
    </script>
</head>
<body>
     <select id="countrySelect" onchange="findCity()"></select>
     <select id="citySelect"></select>
</body>
</html>